<template>
  <div ref="scatterChart" :style="{ width: '800px', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";

// 定义 props
const props = defineProps({
  scatterData: {
    type: Array,
    required: true,
  },
  newScatter: {
    type: Array,
  },
  lineData: {
    type: Array,
    required: true,
  },
  lineData2: {
    type: Array,
    required: true,
  },
  title: {
    type: String,
    default: "利用线性回归分析进行等号预测",
  },
});

// 引用 DOM 元素
const scatterChart = ref(null);

var chartInstance = null;
var clickPoints = [];

// 初始化图表
const initChart = () => {
  if (scatterChart.value) {
    chartInstance = echarts.init(scatterChart.value);
    updateChart();
  }
};

// 更新图表配置
const updateChart = () => {
  if (!chartInstance) return;

  const options = {
    title: {
      text: props.title,
      textAlign: "center",
      left: "50%",
    },
    tooltip: {},
    xAxis: {
      name: "X轴-排队人数（人）",
      nameLocation: "middle",
      nameGap: 30,
    },
    yAxis: {
      name: "Y轴-等号时间（分）",
      nameLocation: "middle",
      nameGap: 30,
    },
    series: [
      {
        name: "回归线",
        symbolSize: 8,
        data: props.scatterData,
        type: "scatter",
        itemStyle: {
          color: "red",
        },
        markLine: {
          animation: false,
          lineStyle: {
            width: 2,
            type: "solid",
            color: "rgb(51.2,126.4,204)",
          },
          data: [
            [
              {
                coord: props.lineData[0],
                symbol: "none",
              },
              {
                coord: props.lineData[1],
                symbol: "none",
              },
            ],
          ],
        },
      },
      {
        name: "预测",
        type: "scatter", // 用于显示点击点
        data: props.newScatter, // 动态更新点击点
        symbolSize: 12,
        itemStyle: {
          color: "green",
        },
        markLine: {
          animation: false,
          lineStyle: {
            width: 2,
            type: "solid",
            color: "orange",
          },
          data: [
            [
              {
                coord: props.lineData2[0],
                symbol: "none",
              },
              {
                coord: props.lineData2[1],
                symbol: "none",
              },
            ],
          ],
        },
      },
    ],
  };

  chartInstance.setOption(options);
  // chartInstance.getZr().off("click");
  // chartInstance.getZr().on("click", (params) => {
  //   if (clickPoints.length === 2) {
  //     // 清空点击记录和点击点
  //     clickPoints = [];
  //   }
  //   const { offsetX, offsetY } = params.event;

  //   // 将像素坐标转换为实际坐标
  //   const pointInGrid = chartInstance.convertFromPixel({ seriesIndex: 0 }, [
  //     offsetX,
  //     offsetY,
  //   ]);

  //   // 记录点击位置
  //   clickPoints.push(pointInGrid);

  //   // 动态更新点击点
  //   const currentPoints = chartInstance.getOption().series[1].data || [];
  //   currentPoints.push(pointInGrid);

  //   // 更新图表以显示点击点
  //   chartInstance.setOption({
  //     series: [
  //       {}, // 主系列保持不变
  //       {
  //         data: currentPoints, // 更新点击点
  //       },
  //     ],
  //   });

  //   // 如果已点击两次，则绘制 markLine
  //   if (clickPoints.length === 2) {
  //     updateChart(); // 更新图表以显示 markLine

  //     chartInstance.setOption({
  //       series: [
  //         {}, // 主系列保持不变
  //         {
  //           data: [], // 清空点击点
  //         },
  //       ],
  //     });
  //   }
  // });
};

// 监听数据变化
watch(
  () => props.scatterData,
  () => {
    if (chartInstance) {
      clickPoints = [];
      updateChart();
    }
  },
  { deep: true }
);
// 监听数据变化
watch(
  () => props.newScatter,
  () => {
    if (chartInstance) {
      updateChart();
    }
  },
  { deep: true }
);
// 监听数据变化
watch(
  () => props.lineData,
  (newVal) => {
    if (chartInstance) {
      updateChart();
    }
  },
  { deep: true }
);
watch(
  () => props.lineData2,
  (newVal) => {
    if (chartInstance) {
      updateChart();
    }
  },
  { deep: true }
);

// 生命周期钩子
onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
/* 样式可以根据需求自定义 */
</style>
